<template>
  <div style="padding: 20px">
    <el-row :gutter="20">
      <el-col :span="14">
        <div class="fo-box">
          <div class="fo-title">
            <strong>预报总览</strong>
          </div>
          <div class="fo-view">
            <ul class="fo-ul">
              <template v-for="item in overviewOfOutputList">
                <li>
                  <div>
                    <el-image style="width: 50px;height: 50px" :src="src[0]"></el-image>
                    <div class="fl-li"><strong style="color: #2167fa">{{ item.count }}</strong><small> {{ item.unit }}
                      (全区: <span style="color:#2167fa;font-weight: bold">{{ item.qu }}</span> {{ item.quit }})</small>
                      <br> <strong> {{ item.year }}</strong></div>
                  </div>
                  <div>
                    <el-image style="width: 50px;height: 50px" :src="src[1]"></el-image>
                    <div class="fl-li"><strong style="color: red">{{ item.rate }}</strong> <small>% (全区: <span
                        :style="{color:item.area>0?'red':'green'}">{{ item.area }}%</span> )</small> <br>
                      <strong>{{ item.alert }}</strong></div>
                  </div>
                </li>
              </template>
            </ul>
            <div class="fo-yubao">
              <el-image style="width: 50px;height: 50px" :src="src[0]"></el-image>
              <div>
                <strong> 预报准确度 16.98% </strong> (全区: <span style="color: red">12.84%</span>)
              </div>
            </div>
            <div class="bu-echarts">
              <average-prediction-echarts></average-prediction-echarts>
            </div>
            <br>
          </div>
        </div>
        <br>
      </el-col>
      <el-col :span="10">
        <div class="fo-box">
          <div class="fo-title" style="display: flex;justify-content: space-between">
            <strong>街道预报总览</strong>
            <div>
              <el-select
                  v-model="overviewKey"
                  placeholder="Select"
                  style="width: 240px"
              >
                <el-option
                    v-for="item in [{label:'2024-05',value:0},{label:'2024-04',value:1}]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="fo-view">
            <el-table
                height="660"
                :data="overviewList"
                :header-cell-style="{color:'#000000'}"
                border>
              <el-table-column
                  prop="deptName"
                  label="区域"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="fillNum"
                  label="填报家数"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="plan"
                  label="预报产值">
                <template #default="scope">
                  {{ scope.row.plan }}亿元
                </template>
              </el-table-column>
              <el-table-column
                  prop="yearRate"
                  label="同比去年">
                <template #default="scope">
                  <span
                      :style="{color:changRage(scope.row.yearRate)>0?'red':'green'}">{{
                      changRage(scope.row.yearRate)
                    }}%</span>
                </template>
              </el-table-column>
              <el-table-column
                  prop="monthRate"
                  label="五比上月">
                <template #default="scope">
                  <span
                      :style="{color:changRage(scope.row.monthRate)>0?'red':'green'}">{{
                      changRage(scope.row.monthRate)
                    }}%</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <br>
    <div class="fo-box">
      <div class="fo-title">
        <strong>预报总览</strong>
      </div>
      <div class="fo-view" style="padding:10px 20px;">
        <el-tabs v-model="activeName">
          <el-tab-pane label="预报产值" name="first"></el-tab-pane>
          <el-tab-pane label="预报产值同比" name="second"></el-tab-pane>
          <el-tab-pane label="预报产值环比" name="third"></el-tab-pane>
        </el-tabs>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="bu-prog-title">
              <div>{{ outputValueData[current].totalMore.rank }}企业 <strong
                  style="color: #0b63b7">{{ outputValueData[current].totalMore.num }}家</strong></div>
              <div> 占比：<strong style="color: #0b63b7">{{
                  (outputValueData[current].totalMore.rate * 100).toFixed(2)
                }}%</strong></div>
            </div>
            <ul class="bu-prog">
              <li v-for="(item,index) in  outputValueData[current].more" @click="getDeptList('more',index)">
                <div style="display: flex;justify-content: space-between;padding: 5px 0">
                  <div>{{ item.rank }}</div>
                  <div>{{ changRage(item.rate) }}%</div>
                </div>
                <el-progress :percentage="changRage(item.rate)" :show-text="false"></el-progress>
              </li>
            </ul>
            <br>
            <div class="bu-prog-title-2">
              <div>{{ outputValueData[current].totalLow.rank }}企业分布 <strong
                  style="color: #fcaf5f">{{ outputValueData[current].totalLow.num }}家</strong></div>
              <div> 占比：<strong style="color: #fcaf5f">{{
                  (outputValueData[current].totalLow.rate * 100).toFixed(2)
                }}%</strong></div>
            </div>
            <ul class="bu-prog">
              <li v-for="(item,index) in  outputValueData[current].low" @click="getDeptList('low',index)">
                <div style="display: flex;justify-content: space-between;padding: 5px 0">
                  <div>{{ item.rank }}</div>
                  <div>{{ changRage(item.rate) }}%</div>
                </div>
                <el-progress :percentage="changRage(item.rate)" :show-text="false"></el-progress>
              </li>
            </ul>
          </el-col>
          <el-col :span="8">
            <ul class="bu-prog-2">
              <li v-for="(item,index) in  deptList" @click="getCompanyList(index)">
                <div style="display: flex;justify-content: space-between;padding: 5px 0">
                  <div>{{ item.deptName }}</div>
                  <div>{{ changRage(item.rate) }}%</div>
                </div>
                <el-progress color="#fcaf5f" :percentage="changRage(item.rate)" :show-text="false"></el-progress>
              </li>
            </ul>
          </el-col>
          <el-col :span="8">
            <el-table
                height="740"
                :data="companyList"
                :header-cell-style="{background:'#f5f7fa',color:'#000000'}"
                border
            >
              <el-table-column
                  prop="key"
                  label="企业名称"
              >
              </el-table-column>
              <el-table-column
                  prop="value"
                  label="预报产值"
                  width="150"
                  align="center"
              >
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>


<script setup>
import {outputValueData, overviewOfOutputList, planOverviewData} from '../data/data.js'
import {onMounted, reactive, ref, watch, watchEffect} from "vue";
import utils from "@/utils/index.js";
import AveragePredictionEcharts from "@/views/situationalAwareness/Echarts/AveragePredictionEcharts.vue";

const src = reactive([
  utils.getAssetsFile('qian.png'),
  utils.getAssetsFile('biao.png'),
  utils.getAssetsFile('yubao.png')
])

const activeName = ref('first')
const current = ref(0)
const deptList = ref([])
const companyList = ref([])
const overviewKey = ref(0)
const overviewList = ref([])

watchEffect(() => {
  current.value = activeName.value === 'first' ? 0 : activeName.value === 'second' ? 1 : 2
})

watch(overviewKey, async (newVal) => {
  await getOverViewList(newVal);
})

const changRage = (rate) => {
  return Number((rate * 100).toFixed(2))
}


const getDeptList = async (type, index) => {
  deptList.value = outputValueData?.[current.value]?.[type]?.[index]?.areaCompanyList;
  return true
}


const getCompanyList = async (index) => {
  companyList.value = deptList.value[index]?.companyList
  return true
}


const getOverViewList = async (index) => {
  overviewList.value = planOverviewData[index]
  console.log('overviewList.value ', overviewList.value)
  return true
}

onMounted(async () => {
  await getDeptList('more', 0)
  await getCompanyList(0)
  await getOverViewList(0)
})


</script>

<style scoped lang="scss">
.fo-box {
  padding: 20px;
  box-sizing: border-box;
  background-color: #f7f8fa;
}

.fo-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  > strong {
    font-size: 16px;
    border-left: 4px solid #1e87f0;
    padding-left: 10px;
  }
}

.fo-view {
  height: calc(100% - 50px);
  background-color: #ffffff;
}

.fo-ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;

  > li {
    width: calc(50% - 10px);

    > div {
      display: flex;
      align-items: center;
      padding: 25px;
    }

    .fl-li {
      margin-left: 20px;

      > strong:first-child {
        font-size: 20px;
      }

      > small {
        font-size: 14px;
        color: #666666;
      }
    }
  }


}
.fo-yubao{
  margin:0 20px;
  padding: 20px;
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
}

.bu-echarts {
  height: 260px;
  margin: 20px;
  background-color: #f5f7fa;
}

.bu-prog-title {
  border: 1px solid #d2d9fe;
  background-color: #f0f4fc;
  padding: 20px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bu-prog-title-2 {
  border: 1px solid #fcaf5f;
  background-color: #fcf6f0;
  padding: 20px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bu-prog {
  margin-top: 10px;
  font-size: 14px;

  > li {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ffffff;
  }

  > li:hover {
    border: 1px solid #e5e5e5;
    background-color: rgba(0, 0, 0, .025);
  }
}

.bu-prog-2 {
  margin-top: 10px;
  font-size: 14px;

  > li {
    cursor: pointer;
    padding: 7.15px;
    border: 1px solid #ffffff;
  }

  > li:hover {
    border: 1px solid #d2d9fe;
    background-color: #f0f4fc;
  }
}
</style>
